import React, { Component } from 'react';
import { View, Platform, SafeAreaView, Text, Image, TextInput, TouchableOpacity, Dimensions, StatusBar, } from 'react-native';
import { PickerView } from 'antd-mobile-rn';
import api from '../../../../utils/api';
import { ScrollView } from 'react-native-gesture-handler';
import { Header } from 'react-navigation';

const window = Dimensions.get("window");

const statusBarHeight = StatusBar.currentHeight;


const hours = [];
for (let i = 0; i < 24; i++) {
    hours.push({
        value: i < 10 ? `0${i}` : `${i}`,
        label: i < 10 ? `0${i}` : `${i}`
    })
}

const minutes = [];
for (let i = 0; i < 60; i++) {
    minutes.push({
        value: i < 10 ? `0${i}` : `${i}`,
        label: i < 10 ? `0${i}` : `${i}`
    })
}

const colorsMap = {
    "红色": "#FF5A6F",
    "黄色": "#FCB03C",
    "绿色": "#00B7A5",
    "蓝色": "#005792",
    "灰色": "#969EB0",
}

const projects = [

]


export default class TaskDetail extends Component {

    static navigationOptions = ({ navigation }) => {

        console.log("titleOptions e::", navigation)



        return {
            title: "任务详情",
            headerRight: (
                <View></View>
            )
        };
    }

    state = {
        showTimer: false,
        showTag: false,
        timerValue: ["00", "00"],
        colorValue: null,
        showProject: false,
        projects: [],
        firstValue: null,
        showSecend: false,
        secendValue: null,
        secendProjects: [],
        showThird: false,
        thirdValue: null,
        thirdProjects: [],
        scrollTop: 0,
        task: {}
    }

    componentDidMount() {

        this.initPracticeNodes();

        console.log("ss", this.props);

        const navigation = this.props.navigation;
        const task = navigation.getParam("task", {});
        this.setState({
            task: task
        });
        if (task.remainTime) {
            this.setState({
                timerValue: task.remainTime.split(":")
            });
        }
        if (task.tag) {
            this.setState({
                colorValue: task.tag
            });
        }
        if (task.practiceVo) {

        }
    }

    initPracticeNodes = () => {
        api({
            url: "/practice/initPracticeNodes"
        }).then(data => {

            const navigation = this.props.navigation;
            const task = navigation.getParam("task", {});
            if (task.practiceVo) {
                const { first, secend, third } = task.practiceVo;
                const projects = data.result;
                const firstData = projects.find(item => item.value == first);
                const secendProjects = firstData ? firstData.childNode : [];
                const secendData = secendProjects.find(item => item.value == secend);
                const thirdProjects = secendData ? secendData.childNode : [];
                this.setState({
                    projects: projects,
                    secendProjects: secendProjects,
                    thirdProjects: thirdProjects,
                    firstValue: first,
                    secendValue: secend,
                    thirdValue: third
                });
            } else {
                this.setState({
                    projects: data.result
                })
            }

        })
    }

    updateTask = (data) => {
        const navigation = this.props.navigation;
        const { task } = this.state;
        const back = navigation.getParam("back", () => { });
        api({
            url: "/task/v2/update",
            method: "POST",
            body: {
                taskId: task.taskId,
                ...data
            }
        }).then(data => {
            back();
        });
    }

    render() {

        const {
            showTimer, timerValue, showTag,
            colorValue, projects, showProject,
            firstValue, showSecend, secendValue,
            secendProjects, showThird, thirdProjects,
            thirdValue, scrollTop, task
        } = this.state;
        // const colorStr = colorStr[colorValue];

        const firstData = projects.find(item => item.value == firstValue);
        const secendData = secendProjects.find(item => item.value == secendValue);
        const thirdData = thirdProjects.find(item => item.value == thirdValue);

        console.log("firstData::", firstData, firstValue);
        // console.log("scr",this.refs.contentScrollView.get)

        const ShowTimerModal = showTimer ? (

            <View style={{
                width: window.width,
                height: Platform.OS == "android" ? (window.height - statusBarHeight - 161) : window.height,
                backgroundColor: "rgba(0,0,0,0.5)",
                position: "absolute",
                top: 160.5 - scrollTop,
                flex: 1,
                // position: "relative"
            }}
                activeOpacity={1}


            >




                <View style={{ backgroundColor: "#fff", paddingBottom: 10 }}>
                    <PickerView
                        data={[
                            hours,
                            minutes
                        ]}
                        value={timerValue}
                        cascade={false}
                        onChange={(value) => {
                            this.setState({ timerValue: value })
                        }}
                    >

                    </PickerView>
                </View>
                <TouchableOpacity style={{
                    flex: 1
                }}
                    onPress={() => {
                        // console.log("click")
                        this.setState({
                            showTimer: false
                        })
                        this.updateTask({
                            remainTime: `${timerValue[0]}:${timerValue[1]}`
                        })
                    }}
                >

                </TouchableOpacity>

            </View>
        ) : null;


        const ShowTagModal = showTag ? (
            <View style={{
                width: window.width,
                height: Platform.OS == "android" ? (window.height - statusBarHeight - 221) : window.height,
                backgroundColor: "rgba(0,0,0,0.5)",
                position: "absolute",
                top: 211 - scrollTop
            }}

            >
                <View style={{ backgroundColor: "#fff" }}>
                    <TouchableOpacity
                       
                        style={{
                            height: 50,
                            backgroundColor: "#ffffff",
                            borderBottomColor: "#E6E6E6",
                            borderBottomWidth: 1,
                            flexDirection: "row"
                        }}
                        activeOpacity={0.5}
                        onPress={() => {
                            this.setState({
                                colorValue: "",
                                showTag: false
                            });
                            this.updateTask({
                                tag: ""
                            })
                        }}
                    >
                        <View style={{

                            height: 50,
                            justifyContent: "center",
                            paddingLeft: 50,
                            width: "50%"
                        }}>
                            <Text>无标签</Text>
                        </View>
                      
                    </TouchableOpacity>
                    {
                        Object.keys(colorsMap).map((key, index) => {
                            const color = colorsMap[key];
                            return (
                                <TouchableOpacity
                                    key={index}
                                    style={{
                                        height: 50,
                                        backgroundColor: "#ffffff",
                                        borderBottomColor: "#E6E6E6",
                                        borderBottomWidth: 1,
                                        flexDirection: "row"
                                    }}
                                    activeOpacity={0.5}
                                    onPress={() => {
                                        this.setState({
                                            colorValue: key,
                                            showTag: false
                                        });
                                        this.updateTask({
                                            tag: key
                                        })
                                    }}
                                >
                                    <View style={{

                                        height: 50,
                                        justifyContent: "center",
                                        paddingLeft: 50,
                                        width: "50%"
                                    }}>
                                        <Text>{key}</Text>
                                    </View>
                                    <View style={{

                                        height: 50,
                                        justifyContent: "center",
                                        paddingRight: 20,
                                        width: "50%",
                                        alignItems: "flex-end"
                                    }}>
                                        <View style={{
                                            width: 50,
                                            height: 20,
                                            borderRadius: 8,
                                            backgroundColor: color
                                        }}></View>
                                    </View>
                                </TouchableOpacity>
                            )
                        })
                    }

                </View>
                <TouchableOpacity style={{
                    flex: 1
                }}
                    onPress={() => {
                        // console.log("click")
                        this.setState({
                            showTag: false
                        })

                    }}
                >

                </TouchableOpacity>
            </View>
        ) : null;


        const ShowProjectModal = showProject ? (
            <View style={{
                width: window.width,
                height: Platform.OS == "android" ? (window.height - statusBarHeight - 331) : window.height,
                backgroundColor: "rgba(0,0,0,0.5)",
                position: "absolute",
                top: 331 - scrollTop
            }}

            >
                <View style={{
                    height: 200
                }}>


                    <ScrollView >
                        <View style={{ backgroundColor: "#fff" }}>
                            {
                                projects.map((item, index) => {
                                    return (
                                        <TouchableOpacity
                                            key={index}
                                            style={{
                                                height: 50,
                                                backgroundColor: "#ffffff",
                                                borderBottomColor: "#E6E6E6",
                                                borderBottomWidth: 1,
                                                flexDirection: "row"
                                            }}
                                            activeOpacity={0.5}
                                            onPress={() => {

                                                this.setState({
                                                    firstValue: item.value,
                                                    secendValue: null,
                                                    secendProjects: [],
                                                    showProject: false,
                                                    secendProjects: item.childNode,
                                                    thirdProjects: [],
                                                    thirdValue: null
                                                });
                                                this.updateTask({
                                                    practiceForm: {
                                                        first: item.value,

                                                    }
                                                })
                                            }}
                                        >
                                            <View style={{

                                                height: 50,
                                                justifyContent: "center",
                                                paddingLeft: 20,
                                                width: "50%"
                                            }}>
                                                <Text>{item.title}</Text>
                                            </View>

                                        </TouchableOpacity>
                                    )
                                })
                            }

                        </View>
                    </ScrollView>
                </View>
                <TouchableOpacity style={{
                    flex: 1
                }}
                    onPress={() => {
                        // console.log("click")
                        this.setState({
                            showProject: false
                        })

                    }}
                >

                </TouchableOpacity>
            </View>
        ) : null;


        const ShowSecendModal = showSecend ? (
            <View style={{
                width: window.width,
                height: Platform.OS == "android" ? (window.height - statusBarHeight - 381) : window.height,
                backgroundColor: "rgba(0,0,0,0.5)",
                position: "absolute",
                top: 381 - scrollTop
            }}

            >
                <View
                    style={{
                        maxHeight: 150
                    }}
                >


                    <ScrollView>
                        <View style={{ backgroundColor: "#fff" }}>
                            {
                                secendProjects.map((item, index) => {
                                    return (
                                        <TouchableOpacity
                                            key={index}
                                            style={{
                                                height: 50,
                                                backgroundColor: "#ffffff",
                                                borderBottomColor: "#E6E6E6",
                                                borderBottomWidth: 1,
                                                flexDirection: "row"
                                            }}
                                            activeOpacity={0.5}
                                            onPress={() => {

                                                this.setState({
                                                    secendValue: item.value,
                                                    showSecend: false,
                                                    thirdProjects: item.childNode,
                                                    thirdValue: null,

                                                });
                                                this.updateTask({
                                                    practiceForm: {
                                                        first: firstValue,
                                                        secend: item.value,

                                                    }
                                                })
                                            }}
                                        >
                                            <View style={{

                                                height: 50,
                                                justifyContent: "center",
                                                paddingLeft: 20,
                                                width: "50%"
                                            }}>
                                                <Text>{item.title}</Text>
                                            </View>

                                        </TouchableOpacity>
                                    )
                                })
                            }

                        </View>
                    </ScrollView>
                </View>
                <TouchableOpacity style={{
                    flex: 1
                }}
                    onPress={() => {
                        // console.log("click")
                        this.setState({
                            showSecend: false
                        })

                    }}
                >

                </TouchableOpacity>
            </View>
        ) : null;

        const ShowThirdModal = showThird ? (
            <View style={{
                width: window.width,
                height: Platform.OS == "android" ? (window.height - statusBarHeight - 431) : window.height,
                backgroundColor: "rgba(0,0,0,0.5)",
                position: "absolute",
                top: 431 - scrollTop
            }}

            >
                <View style={{ height: 100 }}>
                    <ScrollView>
                        <View style={{ backgroundColor: "#fff" }}>
                            {
                                thirdProjects.map((item, index) => {
                                    return (
                                        <TouchableOpacity
                                            key={index}
                                            style={{
                                                height: 50,
                                                backgroundColor: "#ffffff",
                                                borderBottomColor: "#E6E6E6",
                                                borderBottomWidth: 1,
                                                flexDirection: "row"
                                            }}
                                            activeOpacity={0.5}
                                            onPress={() => {

                                                this.setState({
                                                    thirdValue: item.value,
                                                    showThird: false,

                                                });

                                                this.updateTask({
                                                    practiceForm: {
                                                        first: firstValue,
                                                        secend: secendValue,
                                                        third: item.value
                                                    }
                                                })
                                            }}
                                        >
                                            <View style={{

                                                height: 50,
                                                justifyContent: "center",
                                                paddingLeft: 20,
                                                width: "50%"
                                            }}>

                                                <Text>{item.title}</Text>
                                            </View>

                                        </TouchableOpacity>
                                    )
                                })
                            }

                        </View>
                    </ScrollView>
                </View>
                <TouchableOpacity style={{
                    flex: 1
                }}
                    onPress={() => {
                        // console.log("click")
                        this.setState({
                            showThird: false
                        })

                    }}
                >

                </TouchableOpacity>
            </View>
        ) : null;


        return (
            <View style={{ flex: 1 }}>
                <View style={{
                    flex: 1,
                    backgroundColor: "#f6f6f6"
                }}>
                    <ScrollView ref="contentScrollView" onMomentumScrollEnd={(e) => {
                        console.log("e::", e.nativeEvent.contentOffset)
                        this.setState({
                            scrollTop: e.nativeEvent.contentOffset.y
                        });
                    }}>

                        <View style={{
                            height: 50,
                            backgroundColor: "#ffffff",
                            marginTop: 10,
                            borderBottomColor: "#E6E6E6",
                            borderBottomWidth: 1,


                        }}>
                            <TextInput
                                value={task.taskName}
                                style={{
                                    height: 50, color: "#000", fontSize: 14,
                                    paddingRight: 20,
                                    paddingLeft: 20,
                                    width: "100%",
                                }}
                                onChangeText={(value) => {
                                    task.taskName = value;
                                    this.setState({
                                        task: task
                                    })
                                }}
                                onSubmitEditing={(e) => {
                                    const text = e.nativeEvent.text;
                                    if (!text) {
                                        return;
                                    }
                                    this.updateTask({
                                        taskName: text
                                    })
                                }}
                                returnKeyLabel={"确定"}
                                returnKeyType={"done"}
                            ></TextInput>
                        </View>

                        <View style={{
                            height: 50,
                            backgroundColor: "#ffffff",
                            borderBottomColor: "#E6E6E6",
                            borderBottomWidth: 1,
                            paddingLeft: 20,
                            flexDirection: "row"


                        }}>
                            <View style={{
                                width: "30%",
                                alignItems: "flex-start",
                                flexDirection: "row"
                            }}>

                                <View style={{ alignItems: "center", alignContent: "center", width: 20, height: 50, justifyContent: "center" }}>
                                    <Image source={require("./img/bz.png")} style={{ width: 20, height: 20 }}></Image>

                                </View>
                                <View style={{
                                    alignItems: "center",
                                    height: 50,
                                    alignContent: "center",
                                    justifyContent: "center",
                                    paddingLeft: 10,
                                }}>
                                    <Text style={{ color: "#697388", fontSize: 14 }}>备注</Text>
                                </View>
                            </View>
                            <View style={{
                                height: 50,
                                alignItems: "flex-end",
                                width: "70%"
                            }}>
                                <TextInput
                                    value={task.notes}
                                    onChangeText={(text) => {
                                        task.notes = text;
                                        this.setState({
                                            task: task
                                        })
                                    }}
                                    style={{

                                        height: 50, color: "#697388", fontSize: 14,
                                        paddingRight: 20,
                                        width: "100%",
                                        // width: 200,
                                        textAlign: "right",


                                    }}
                                    returnKeyLabel={"确定"}
                                    returnKeyType={"done"}
                                    onSubmitEditing={(e) => {
                                        const text = e.nativeEvent.text;
                                        if (!text) {
                                            return;
                                        }
                                        this.updateTask({
                                            notes: text
                                        });
                                    }}
                                ></TextInput>
                            </View>

                        </View>
                        <TouchableOpacity
                            style={{
                                height: 50,
                                backgroundColor: "#ffffff",
                                borderBottomColor: "#E6E6E6",
                                borderBottomWidth: 1,
                                paddingLeft: 20,

                            }}
                            activeOpacity={0.3}
                            onPress={() => {
                                if (showTimer) {
                                    this.updateTask({
                                        remainTime: `${timerValue[0]}:${timerValue[1]}`
                                    })
                                }
                                this.setState({
                                    showTimer: !showTimer,
                                    showTag: false,
                                    showProject: false,
                                    showSecend: false,
                                    showThird: false
                                });
                            }}
                        >
                            <View style={{ flex: 1, flexDirection: "row" }}>


                                <View style={{
                                    alignItems: "flex-start",
                                    width: "50%",
                                    flexDirection: "row"
                                }}>
                                    <View style={{ alignItems: "center", alignContent: "center", width: 20, height: 50, justifyContent: "center" }}>
                                        <Image source={require("./img/timer.png")} style={{ width: 20, height: 20 }}></Image>
                                    </View>
                                    <View style={{
                                        alignItems: "center",
                                        height: 50,
                                        alignContent: "center",
                                        justifyContent: "center",
                                        paddingLeft: 10
                                    }}>
                                        <Text style={{ color: "#697388", fontSize: 14 }}>时间</Text>
                                    </View>
                                </View>

                                <View style={{
                                    alignItems: "flex-end",
                                    width: "50%",
                                    height: 50,
                                    alignContent: "center",
                                    justifyContent: "center",
                                    paddingRight: 20

                                }}>
                                    <Text>{timerValue[0]}:{timerValue[1]}</Text>
                                </View>
                            </View>

                        </TouchableOpacity>
                        <TouchableOpacity
                            style={{
                                height: 50,
                                backgroundColor: "#ffffff",
                                borderBottomWidth: 0,
                                paddingLeft: 20,



                            }}
                            activeOpacity={0.5}
                            onPress={() => {

                                this.setState({
                                    showTag: !showTag,
                                    showTimer: false,
                                    showProject: false,
                                    showSecend: false,
                                    showThird: false
                                })
                            }}
                        >
                            <View style={{ flex: 1, flexDirection: "row" }}>


                                <View style={{
                                    alignItems: "flex-start",
                                    width: "50%",
                                    flexDirection: "row"
                                }}>
                                    <View style={{ alignItems: "center", alignContent: "center", width: 20, height: 50, justifyContent: "center" }}>
                                        <Image source={require("./img/tag.png")} style={{ width: 20, height: 20 }}></Image>
                                    </View>
                                    <View style={{
                                        alignItems: "center",
                                        height: 50,
                                        alignContent: "center",
                                        justifyContent: "center",
                                        padding: 10
                                    }}>
                                        <Text style={{ color: "#697388", fontSize: 14 }}>标签</Text>
                                    </View>
                                </View>

                                <View style={{
                                    alignItems: "flex-end",
                                    width: "50%",
                                    height: 50,
                                    alignContent: "center",
                                    justifyContent: "center",
                                    paddingRight: 20

                                }}>
                                    {
                                        colorValue ? (
                                            <View style={{
                                                width: 50,
                                                height: 20,
                                                borderRadius: 8,
                                                backgroundColor: colorsMap[colorValue]
                                            }}></View>
                                        ) : (<View>
                                            <Text style={{ color: "#697388", fontSize: 14 }}>无标签</Text>
                                        </View>)
                                    }

                                </View>
                            </View>

                        </TouchableOpacity>

                        <View style={{
                            height: 50,
                            backgroundColor: "#ffffff",
                            marginTop: 20,
                            borderBottomColor: "#E6E6E6",
                            borderBottomWidth: 1,
                            alignContent: "center",
                            justifyContent: "center",
                            paddingLeft: 20

                        }}>
                            <Text style={{ fontSize: 14, color: "#000000" }}>
                                练习项目
                    </Text>
                        </View>
                        <TouchableOpacity
                            style={{
                                height: 50,
                                backgroundColor: "#ffffff",
                                borderBottomColor: "#E6E6E6",
                                borderBottomWidth: 1,
                                flexDirection: "row"


                            }}
                            onPress={() => {
                                this.setState({
                                    showProject: !showProject,
                                    showTimer: false,
                                    showTag: false,
                                    showSecend: false,
                                    showThird: false
                                })
                            }}
                        >
                            <View style={{
                                width: "50%",
                                height: 50,
                                alignContent: "center",
                                justifyContent: "center",
                                paddingLeft: 20
                            }}>

                                <Text style={{ fontSize: 14, color: "#697388" }}>
                                    {firstData ? firstData.title : "选择练习项目"}
                                </Text>
                            </View>
                            <View style={{
                                width: "50%",
                                height: 50,
                                alignContent: "center",
                                justifyContent: "center",
                                paddingRight: 20,
                                alignItems: "flex-end"
                            }}>
                                {
                                    showProject ? (<Image source={require("./img/arr-down.png")} style={{ width: 15, height: 15 }}></Image>) : (<Image source={require("./img/arr-right.png")} style={{ width: 20, height: 20 }}></Image>)
                                }

                            </View>

                        </TouchableOpacity>

                        <TouchableOpacity
                            style={{
                                height: 50,
                                backgroundColor: "#ffffff",
                                borderBottomColor: "#E6E6E6",
                                borderBottomWidth: 1,
                                flexDirection: "row"


                            }}
                            onPress={() => {
                                this.setState({
                                    showSecend: !showSecend,
                                    showTimer: false,
                                    showProject: false,
                                    showTag: false,
                                    showThird: false
                                })
                            }}
                        >
                            <View style={{
                                width: "50%",
                                height: 50,
                                alignContent: "center",
                                justifyContent: "center",
                                paddingLeft: 20
                            }}>

                                <Text style={{ fontSize: 14, color: "#697388" }}>
                                    {secendData ? secendData.title : ""}
                                </Text>
                            </View>
                            <View style={{
                                width: "50%",
                                height: 50,
                                alignContent: "center",
                                justifyContent: "center",
                                paddingRight: 20,
                                alignItems: "flex-end"
                            }}>
                                {
                                    showSecend ? (<Image source={require("./img/arr-down.png")} style={{ width: 15, height: 15 }}></Image>) : (<Image source={require("./img/arr-right.png")} style={{ width: 20, height: 20 }}></Image>)
                                }

                            </View>

                        </TouchableOpacity>
                        <TouchableOpacity
                            style={{
                                height: 50,
                                backgroundColor: "#ffffff",
                                borderBottomColor: "#E6E6E6",
                                borderBottomWidth: 1,
                                flexDirection: "row"


                            }}
                            onPress={() => {
                                this.setState({
                                    showThird: !showThird,
                                    showTimer: false,
                                    showProject: false,
                                    showTag: false,
                                    showSecend: false
                                })
                            }}
                        >
                            <View style={{
                                width: "50%",
                                height: 50,
                                alignContent: "center",
                                justifyContent: "center",
                                paddingLeft: 20
                            }}>

                                <Text style={{ fontSize: 14, color: "#697388" }}>
                                    {thirdData ? thirdData.title : ""}
                                </Text>
                            </View>
                            <View style={{
                                width: "50%",
                                height: 50,
                                alignContent: "center",
                                justifyContent: "center",
                                paddingRight: 20,
                                alignItems: "flex-end"
                            }}>
                                {
                                    showThird ? (<Image source={require("./img/arr-down.png")} style={{ width: 15, height: 15 }}></Image>) : (<Image source={require("./img/arr-right.png")} style={{ width: 20, height: 20 }}></Image>)
                                }

                            </View>

                        </TouchableOpacity>

                        <TouchableOpacity
                            style={{
                                height: 50,
                                backgroundColor: "#ffffff",
                                marginTop: 20,
                                marginBottom: 50,
                                alignContent: "center",
                                alignItems: "center",
                                justifyContent: "center",
                                display: thirdData ? "flex" : "none"


                            }}
                            onPress={() => {
                                const { navigation } = this.props;
                                navigation.navigate("/card/detail", {
                                    data: {
                                        ieltsId: firstData.value,
                                        examPartition: thirdData.value,
                                        setId: secendData.value
                                    }
                                });
                            }}
                        >
                            <View style={{
                                flexDirection: "row"
                            }}>
                                <Image source={require("../card/img/hand.png")} style={{
                                    width: 18,
                                    height: 18
                                }}></Image>
                                <Text style={{ marginLeft: 10 }}>{thirdData ? thirdData.button : ""}</Text>
                            </View>


                        </TouchableOpacity>


                    </ScrollView>
                </View>
                {ShowTimerModal}
                {ShowTagModal}
                {ShowProjectModal}
                {ShowSecendModal}
                {ShowThirdModal}



            </View>
        )
    }
}